Search Consoleに基づくモバイル表示性能およびアクセシビリティ(WCAG)最適化実戦記

1行要約

Google Search ConsoleのCore Web Vitalsおよびアクセシビリティ指標を改善するため、(1) GA4遅延読み込みによるTBT 0ms達成、(2) Giscus/WebGLのIntersectionObserver遅延描画とCLS防止、(3) WCAG 2.1 AA 4.5:1明度コントラスト比および44pxタッチターゲット確保を実施した記録。

1. Core Web Vitals 改善指標

[Core Web Vitals 改善前後比較]
┌─────────────────────────┬──────────────┬──────────────┐
│ 指標 (Metric)           │ 改善前       │ 改善後       │
├─────────────────────────┼──────────────┼──────────────┤
│ Total Blocking Time(TBT)│ ~350ms       │ 0ms (完全解消)│
│ Cumulative Layout Shift │ 0.12 (要改善)│ 0.00 (良好)  │
│ Lighthouse パフォーマンス│ 78点         │ 99〜100点    │
│ Lighthouse アクセシビリティ│ 82点       │ 100点 (満点) │
└─────────────────────────┴──────────────┴──────────────┘

---

2. 詳細最適化手法

1) GA4スクリプトのインタラクション遅延読み込み

初期レンダリングスレッドを占有するGoogle Analytics 4の読み込みを、初回インタラクション(scroll, touchstart)または5秒タイムアウトまで遅延させ、TBTを0msに短縮。

const loadGA = () => {
  if (window.__gaLoaded) return;
  window.__gaLoaded = true;
  const script = document.createElement('script');
  script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
  script.async = true;
  document.head.appendChild(script);
};
['scroll', 'touchstart', 'mousemove'].forEach(ev => 
  window.addEventListener(ev, loadGA, { once: true, passive: true })
);
setTimeout(loadGA, 5000);

2) 重いコンポーネントのIntersectionObserver遅延マウント

• Giscusコメント欄: ビューポート到達時にiframeをロード。CLSを防ぐためコンテナにmin-height: 150pxを事前確保。
• WebGL 3D背景: 画面外へスクロールアウトした際にcancelAnimationFrameでレンダリングループを一時停止しCPU/バッテリー消費を抑制。

---

3. コアチェックポイント (Gotchas)

1. CLS防止用Min-Height: 非同期ウィジェットは読み込み前にプレースホルダー高さ(min-height)をCSSで予約しなければ累積レイアウトシフト(CLS)ペナルティを受ける。
2. パッシブイベントリスナー ({ passive: true }): スクロールイベントにはpassive: trueを指定しブラウザのスクロールスレッドのブロッキングを防ぐ。

---

投稿日: 2026-08-15 14:11:06更新日: 2026-08-15 13:57:00